<template>
	<div class="content">
		<mt-header fixed :title="exerciseInfo.coursename+'练习'">
			<router-link :to="exerciseInfo.source_url" slot="left">
    <mt-button icon="back"></mt-button>
  </router-link>
			<mt-button v-if="currentBox!=='statis'" slot="right">{{ index+1 }}/{{ questionList.length }}题</mt-button>
		</mt-header>
		<!--习题盒子-->
		<div class="contain" v-if="currentBox=='ques'">
			<div class="quesBox" v-html="currentQues.body"></div>
			<h4>答题卡</h4>
			<div  class="answers">
				<div v-for="(x,index) in answerList" class="answer" @click="chooseAnswer(x,index)">{{ x }}</div>
			</div>
		</div>
		<!--习题详情解析盒子-->
		<div class="contain detailcontain" v-if="currentBox=='quesDetail'">
			<div class="quesBox" v-html="currentQues.body"></div>
  			<div class="answer"><span>正确答案：{{ transAnswer(currentQues.answer) }} </span> <span>我的答案：{{ userAnswers[index] }}</span></div>  				
			<h4>解析：</h4>
			<div v-html="currentQues.analysis"></div>
		</div>
		<!--统计盒子-->
		<div class="contain statisContainer" v-if="currentBox=='statis'">
			<h3>你答对了</h3>
			<div class="circleCount">
				<span class="big">{{ rightNum }}</span><span>/{{ questionList.length }}题</span>
			</div>
			<div class="answerResult">
				<div v-for="(x,index) in statis" :class="x?'rights':'wrongs'" @click="lookDetail(index)">{{ index+1 }}</div>
			</div>
			<p>点击题号查看详情</p>
		</div>
		<!--底部盒子-->
		<div class="foot">			
  			<div class="videoKnowledge" v-show="index>0&&currentBox=='ques'" @click="prevQues">上一题</div>
  			<div class="consolidation" v-show="index<questionList.length-1&&currentBox=='ques'" @click="nextQues">下一题</div>
  			
  			<div class="subAnswers" v-show="index==(questionList.length-1)&&currentBox=='ques'" @click="subAnswers">提交答案</div>
  			<!--<div class="videoKnowledge" v-if="currentBox=='statis'" @click="goVideo">视频讲解</div>-->
  			<div class="consolidation" v-show="currentBox=='statis'" @click="refresh">再来几道</div>
  			<div class="consolidation" v-show="currentBox=='quesDetail'" @click="holded">看懂了</div>
  		</div>
	</div>
</template>

<script>import FooterMsg from '../../components/FooterMsg'
import HeaderMsg from '../../components/Header'
import { mapState, mapMutations } from "vuex"
import api from '../../api'
import $ from 'jquery'
export default {
	activated() {
		this.INIT_STATE();
		//每次进来重置数据
		this.questionList=[];
		this.page=1;
		this.index=0;
		this.currentQues={};
		this.currentBox='ques';
		this.statis=[];
		this.rightNum=0;
		this.quesDataYuan=[];
		if(this.exerciseInfo.typeid == 3 || this.exerciseInfo.typeid == 7) {
			this.answerList = ['A', 'B', 'C', 'D', 'E', 'F']
		} else {
			this.answerList = ['对', '错']
		}
		this.getData();
		$(function() {
			var h = document.body.clientHeight;
			$('.contain').css('min-height', h - 44 - 50 - 28 + 'px')
			$('.answer').removeClass('active')
		})
	},
	components: {
		FooterMsg,
		HeaderMsg
	},
	computed: {
		...mapState(["exerciseInfo"])
	},
	data() {
		return {
			msg: '<p>asd</p>',
			questionList: [],
			rightAnswers: [],
			userAnswers: [],
			answerList: [],
			index: 0,
			currentQues: {},
			currentBox: 'ques',
			statis: [], //统计结果
			rightNum: 0,
			page: 1,
			quesDataYuan: []
		}
	},
	mounted() {},
	methods: {
		...mapMutations(["INIT_STATE"]),
		getData() {
			var that = this;
			api.getListQuestion({
				category_id: this.exerciseInfo.category_id,
				type_id: this.exerciseInfo.typeid,
				level_id: this.exerciseInfo.level_id,
				page: this.page
			}).then(response => {
				that.quesDataYuan = response.data.datalist
				that.questionList = that.quesDataYuan.splice(0, 5);
				that.rightAnswers = that.questionList.map(function(x) {
					return x.answer
				})
				that.currentQues = that.questionList[that.index];
				//that.getAnswer(that.index)
				that.currentBox = 'ques'
				console.log(that.questionList)
			})
		},
		getAnswer(index) {
			this.answerList = this.currentQues.contain.match(/[a-zA-Z]\．/g)
			if(this.answerList) {
				for(var i = 0; i < this.answerList.length; i++) {
					this.answerList[i] = this.answerList[i].slice(0, 1)
				}
			} else {
				this.answerList = ["对", "错"]
			}
		},
		nextQues() {
			this.index++;
			this.currentQues = this.questionList[this.index];
			//			this.getAnswer();
			//清除选项样式
			var answer = document.getElementsByClassName('answer');
			for(var i = 0; i < answer.length; i++) {
				answer[i].className = 'answer'
			}
		},
		prevQues() {
			this.index--;
			this.currentQues = this.questionList[this.index];
			//			this.getAnswer();
			//清除选项样式
			var answer = document.getElementsByClassName('answer');
			for(var i = 0; i < answer.length; i++) {
				answer[i].className = 'answer'
			}
		},
		chooseAnswer(x, index) {
			var answer = document.getElementsByClassName('answer');
			console.log(answer[index].className)
			if(answer[index].className.indexOf('active') > -1) {
				answer[index].setAttribute('class', 'answer');
				this.userAnswers[this.index] = this.userAnswers[this.index].replace(x, '')
			} else {
				answer[index].setAttribute('class', 'answer active');
				if(this.userAnswers[this.index]) {
					this.userAnswers[this.index] = this.userAnswers[this.index] + x;
				} else {
					this.userAnswers[this.index] = x
				}
			}
			console.log(this.userAnswers)

		},
		subAnswers() {
			this.currentBox = 'statis';
			console.log(this.rightAnswers)
			console.log(this.userAnswers)
			for(var i = 0; i < this.questionList.length; i++) {
				if(this.rightAnswers[i] == this.userAnswers[i]) {
					this.statis[i] = true;
					this.rightNum++;
				} else {
					this.statis[i] = false
				}
			}
		},
		lookDetail(index) {
			console.log(index)
			this.index = index;
			this.currentQues = this.questionList[this.index];
			this.currentBox = 'quesDetail'
		},
		holded() { //看懂了
			this.currentBox = 'statis'
		},
		refresh() {
			this.index = 0;
			if(this.quesDataYuan.length >= 5) {
				this.questionList = this.quesDataYuan.splice(0, 5);
				this.rightAnswers = this.questionList.map(function(x) {
					return x.answer
				})
				this.currentQues = this.questionList[this.index];
			} else {
				this.page++;
				this.getData();
			}
			this.currentBox = 'ques';
			this.userAnswers = [];
		},
		transAnswer(ans) {
			if(ans.indexOf('正确') > -1 || ans == 'R' || ans.indexOf('对') > -1) {
				return '√';
			} else if(ans.indexOf('错误') > -1 || ans == 'W' || ans.indexOf('错') > -1) {
				return 'X';
			} else {
				return ans
			}
		},
		goVideo() {
			this.currentBox = 'quesVideo';
		},
		openVideo(event) {
			event.target.play()
			this.requestFullScreen(event.target)
		},
		requestFullScreen(Element) {
			if(Element.requestFullscreen) {
				Element.requestFullscreen();
			} else if(Element.mozRequestFullScreen) {
				Element.mozRequestFullScreen();
			} else if(Element.webkitRequestFullScreen) {
				Element.webkitRequestFullScreen();
			}
		}
	}
}</script>

<style scoped>.contain {
	font-size: 14px;
	text-align: left;
	height: calc(100% - 94px);
	height: -webkit-calc(100% - 94px);
	height: -moz-calc(100% - 94px);
	overflow: scroll;
	padding: 14px 14px;
}

.answers {
	height: 118px;
	border: 1px dashed rgba(0, 0, 0, 0.2);
	margin-top: 15px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	padding-top: 15px;
	padding-bottom: 15px;
}

.answers div {
	width: 50px;
	height: 50px;
	border-radius: 50px;
	text-align: center;
	line-height: 50px;
	margin-left: 7%;
	margin-right: 9%;
	background: #FFFFFF;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.30);
}

.answers div:nth-of-type(n+4) {
	margin-top: 20px;
}

.answers div.active {
	background: #1382FA;
	box-shadow: 0 3px 6px 0 #58C6FB;
	color: white;
}

h4 {
	padding: 0 12px;
	margin-bottom: 10px;
}

h3 {
	text-align: center;
}

.statisContainer .circleCount {
	width: 2.7rem;
	height: 2.7rem;
	margin: 15px auto;
	border-radius: 2.7rem;
	border: 10px solid #1382FA;
	background: #629FFF;
	line-height: 2.7rem;
	text-align: center;
}

.statisContainer .circleCount span {
	font-size: 16px;
	color: #FFFFFF;
}

.statisContainer .circleCount span.big {
	font-size: 50px;
}

.videocontain {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	padding-top: 10px;
}

.videocontain>div {
	width: 40%;
	height: 20%;
}

.videocontain>div>video {
	width: 100%;
	height: 100%;
}

.answerResult {
	display: flex;
	justify-content: space-around;
	margin-top: 60px;
}

.answerResult div {
	width: 35px;
	height: 35px;
	border-radius: 35px;
	text-align: center;
	line-height: 35px;
	color: white;
}

.answerResult div.rights {
	background: #47E097;
}

.answerResult div.wrongs {
	background: #FF6269;
}

.statisContainer p {
	text-align: center;
	font-size: 12px;
	color: #A5A5A5;
	margin-top: 30px;
}

.foot {
	position: fixed;
	display: flex;
	justify-content: flex-start;
	bottom: 0;
	height: 50px;
	font-size: 16px;
	color: #FFFFFF;
	background: #1382FA;
	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.30);
	width: 100%;
	padding: 0;
	line-height: 50px;
}

.foot div {
	flex: 1;
	text-align: center;
}

.foot div.videoKnowledge {
	background: #FA8C13;
}

.detailcontain {
	padding-top: 15px;
}

.detailcontain .answer {
	display: flex;
	background-color: deepskyblue;
	height: 30px;
	line-height: 30px;
	margin-top: 30px;
}
.detailcontain .answer span {
	flex: 1;
	color: white;
}</style>